<template lang="pug">
  kalix-dialog.user-add(title='修改' bizKey="Discuss" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL")
    div.el-form(slot="dialogFormSlot")
      el-form-item.short(label="用户名称" prop="userName" v-bind:label-width="labelWidth" v-bind:rules="rules.userName")
        el-select(v-model="formModel.userId" placeholder="请选择" @change="getUid")
          el-option(v-for="item in options" v-bind:key="item.id" v-bind:label="item.name" v-bind:value="item.id")
      <!--el-form-item.short(label="课程" prop="cname"  v-bind:label-width="labelWidth" v-bind:rules="rules.cname" )-->
        <!--kalix-select(v-model="formModel.cname"  v-bind:requestUrl="cnameUrl" id="name" appName="cnamename" placeholder="请选择课程" style="width:80%")-->
      el-form-item.short(label="课程" prop="cname" v-bind:label-width="labelWidth" v-bind:rules="rules.cname")
         el-select(v-model="formModel.cid" placeholder="请选择" @change="getCid")
          el-option(v-for="item in optionss" v-bind:key="item.id" v-bind:label="item.name" v-bind:value="item.id")
      el-form-item.short(label="讨论主题" prop="discussTitle" v-bind:label-width="labelWidth" v-bind:rules="rules.discussTitle")
        el-input(v-model="formModel.discussTitle")
      el-form-item.short(label="讨论详情" prop="discussEnclosure" v-bind:label-width="labelWidth" v-bind:rules="rules.discussEnclosure")
        el-input(v-model="formModel.discussEnclosure" type="textarea")

</template>

<script type="text/ecmascript-6">
  import {DiscussURL, CourseURL} from '../../config.toml'
  import FormModel from './model'

  export default {
    name: 'discussEdit',
    data() {
      return {
        downloadURL: DiscussURL,
        labelWidth: '150px',
        columnParam: undefined,
        formModel: Object.assign({}, FormModel),
        rules: {
          // protoNum: [{required: true, message: '请输入原住院人数', trigger: 'change'}]
        },
        targetURL: DiscussURL,
        cnameUrl: CourseURL,
        options: [],
        optionss: []
      }
    },
    mounted() {
      this.getUname()
      this.getCname()
    },
    methods: {
      getUname() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users'
        }).then(res => {
          console.log('res========', res.data)
          this.options = res.data.data
        })
      },
      getUid(val) {
        let obj = {}
        obj = this.options.find((item) => {
          return item.id === val
        })
        this.formModel.userName = obj.name
        console.log('bbbbbbbbbbbbbbbbbbbbbb', this.formModel.userName)
      },
      getCname() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/courses/getAllCourse'
        }).then(res => {
          console.log('res11========', res.data)
          this.optionss = res.data.data
        })
      },
      getCid(val) {
        let obj = {}
        obj = this.optionss.find((item) => {
          return item.id === val
        })
        this.formModel.cname = obj.name
      },
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
      }
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  .el-form
    width 50%
    margin auto
    .radio
      margin-left 150px
      margin-bottom 20px
      .el-radio
        color: #3465cb
        font-weight: bold
        font-size: 14px
</style>
